<!-- 提交订单 -->
<template>
  <div class="index-container">
    <van-nav-bar title="提交订单" />
    <div class="goods-detail-box">
      <van-image
        :src="state.Img01"
        fit="contain"
        width="120"
        height="160"
        radius="8"
      />
      <div class="goods-detail">
        <h3>VIP永久更新</h3>
        <p>￥{{ amount / 100 }}</p>
      </div>
    </div>
    <!-- <van-submit-bar :price="amount" button-text="提交订单" tip="寄送至：湖北 武汉 武昌, 吴先生" :loading="isLoading" -->
    <van-submit-bar
      :price="amount"
      button-text="提交订单"
      :loading="isLoading"
      class="btn-color"
      @submit="payOrder"
    />
    <van-popup
      v-model:show="isPopup"
      position="bottom"
      round
      :style="{ height: '50%' }"
      closeable
    >
      <van-nav-bar title="请选择支付方式" />
      <div class="pay-btn">
        <van-radio-group v-model="checked">
          <van-cell-group inset>
            <van-cell clickable @click="checked = '1'">
              <template #title>
                <div class="pay-item">
                  <img src="@/assets/image/pay2.png" />
                  <span>微信</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell clickable @click="checked = '2'">
              <template #title>
                <div class="pay-item">
                  <img src="@/assets/image/pay1.png" />
                  <span>支付宝</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="verify-pay-btn">
        <van-button type="primary" size="normal" @click="verifyPay()"
          >确认支付</van-button
        >
      </div>
    </van-popup>
    <van-popup
      v-model:show="isWxPayPopup"
      :style="{ borderRadius: '8px' }"
      z-index="99999999"
    >
      <div class="pay-wx-main" @click.stop>
        <div class="pay-item">
          <!-- <h5>请使用微信支付</h5> -->
          <img src="@/assets/image/img06.jpg" />
          <p>支付完成请截图发给客服喔！</p>
        </div>
      </div>
    </van-popup>
    <van-overlay :show="isOverlay" @click="isOverlay = false" z-index="999999">
      <div class="wrapper">
        <div class="tips">
          <img src="@/assets/image/img05.png" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
import {
  HfuPayResult, // 新增订单
  GoodDetail, // 商品详情
} from "@/api/index.js";

import { GetOrderInfoByTradeNo } from "@/api/mine/index.js";

import { getLocalStorage } from "@/utils/tool";

import { showConfirmDialog } from "vant";

const route = useRoute();
const router = useRouter();

const checked = ref("1");

const state = reactive({
  Img01: "",
  anchorType: [
    {
      id: 1,
      title: "vip永久更新",
      image: "",
      checked: true,
      money: 0.1,
      context: "元",
    },
  ],
  orderNumber: "", // 订单编号
  isOrder: false,
  isWeixin: false,
});

let isLoading = ref(false);
let setIntTime = null;
let orderNum = "";
let isPay = false;

const payOrder = async () => {
  orderNum = "";
  isPay = false;
  let paramsorder = {
    goodsId: route.query.goodId,
  };
  isLoading.value = true;
  let datares = await HfuPayResult(paramsorder);
  // let resData = datares.msg
  // isLoading.value = false
  // document.getElementById('payMent').innerHTML = resData;
  // let namevalue = document.getElementsByName("biz_content")[0].value
  // orderNum = JSON.parse(namevalue)
  // localStorage.setItem("out_trade_no", orderNum.out_trade_no)
  showConfirmDialog({
    title: "确认",
    confirmButtonText: "已支付",
    cancelButtonText: "未支付",
    message: "您是否已支付该订单？",
  })
    .then(() => {
      isPay = true;
      getPayResult();
    })
    .catch(() => {});
  // setIntTime = setInterval(() => {
  //   getPayResult()
  // }, 1000)
  // document.forms[0].setAttribute('target', '_self') // 当前窗口跳转
  // document.forms[0].submit();
  // document.getElementById('payMent').innerHTML = ""
};

const getPayResult = async () => {
  let trade_no = localStorage.getItem("out_trade_no");
  let params = {
    orderId: trade_no,
  };
  let { data } = await GetOrderInfoByTradeNo(params);
  try {
    clearInterval(setIntTime);
    if (data.order_status == 1) {
      router.push({
        path: "/register",
        query: {
          id: data.token,
        },
      });
    }
    if (data.order_status == 0 && isPay) {
      showToast("当前订单未支付");
    }
  } catch (error) {
    clearInterval(setIntTime);
  }
};

// 提交支付
let isPopup = ref(false);
const submitPay = () => {
  // payOrder()
  isPopup.value = true;
};

const is_weixn = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
};

let amount = ref(0);
const GetGoodDetail = async () => {
  let { data } = await GoodDetail({ goodId: route.query.goodId });
  amount.value = data.amount;
  state.Img01 = data.img;
  // console.log(data,state.Img01)
};

//确认支付
const isWxPayPopup = ref(false);
const isOverlay = ref(false);
const verifyPay = () => {
  if (checked.value == "2") {
    const newParams = { ...route.query, openId: getLocalStorage("openId") };
    // 导航到相同的路径，但是使用新的参数
    router.push({
      name: route.name,
      query: newParams,
    });
    isOverlay.value = true;
    return;
  }
  isWxPayPopup.value = true;
};

onMounted(() => {
  state.anchorType[0].image = route.query.qrCode;
  state.anchorType[0].money = Number(route.query.diyPrice);
  // state.isWeixin = is_weixn()
  GetGoodDetail();
});
</script>



<style lang="scss" scoped>
.index-container {
  min-height: 100vh;
  background: #f2f2f2;
}

.goods-detail-box {
  background: #fff;
  padding: 10px;
  display: flex;
  margin-top: 10px;

  .goods-detail {
    margin-left: 10px;
    color: #333;

    h3 {
      padding-top: 20px;
      font-size: 20px;
      font-weight: normal;
    }

    p {
      color: #f00;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

.weixin-open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(222, 222, 222);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  img {
    width: 100%;
  }
}

.pay-btn {
  margin-top: 30px;

  .pay-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
}

:deep(.van-cell-group--inset) {
  margin: 0;
}

.verify-pay-btn {
  width: calc(100% - 30px);
  padding: 15px;
  position: absolute;
  bottom: 0;

  :deep(.van-button) {
    width: 100%;
  }
}

.tips {
  color: #fff;

  img {
    width: 100%;
  }
}

.pay-wx-main {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;

  .pay-item {
    // padding:15px;
    border-radius: 8px;
    overflow: hidden;

    h5 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    img {
      width: 100%;
    }

    h5,
    p {
      text-align: center;
    }

    p {
      padding-bottom: 20px;
    }
  }
}
</style>
